<template>
  <view id="orderDetail">
      <view class="title">
          <view>
              <text v-if="OrderDetail.status==1">待付款</text>
              <text v-if="OrderDetail.status==2">待服务</text>
              <text v-if="OrderDetail.status==3">待评价</text>
              <text v-if="OrderDetail.status==4">已完成</text>
              <text v-if="OrderDetail.status==5">已取消</text>
           </view>
          <view v-if="OrderDetail.status==1">预计费用：<text>￥{{OrderDetail.yf_jine}}</text></view>
      </view>

      <view class="orderPart">
          <view class="list">
              <view>订单编号</view>
              <view>{{OrderDetail.order_bh}}</view>
          </view>
          <view class="list">
              <view>下单时间</view>
              <view>{{OrderDetail.create_time}}</view>
          </view>
          <view class="list">
              <view>完成时间</view>
              <view>{{OrderDetail.finish_time}}</view>
          </view>
      </view>

      <view class="tab">
          <view :class="{'active':tabIndex==i}" v-for="(item,i) in ['服务内容','结算信息','评价与售后']" :key="i" @click="chooseTab(i)">
              {{item}}
          </view>
      </view>
      
      <view class="serverPart" v-if="tabIndex==0">
          <view class="list">
              <view>所属区域</view>
              <view>{{OrderDetail.address&&OrderDetail.address.area1}}</view>
          </view>
          <view class="list">
              <view>详细地址</view>
              <view style="">{{OrderDetail.address&&OrderDetail.address.address}}</view>
          </view>
          <view class="list">
              <view>联系人</view>
              <view>{{OrderDetail.address&&OrderDetail.address.linkman}}</view>
          </view>
          <view class="list">
              <view>手机号</view>
              <view>{{OrderDetail.address&&OrderDetail.address.tel}}</view>
          </view>
          <view class="serverCont" v-for="(item,i) in OrderDetail.serve_list" :key="i">
              <view class="serverCont-box" >
                  <img v-if="item&&item.page_img_url" :src="item&&item.page_img_url" alt="图">
                  <img v-else src="static/img/test.png" alt="测试图">
                  <view class="serverCont-right">
                      <view>{{item.serve_name}}</view>
                      <view>{{item.specs_name}}</view>
                      <view>¥ {{item.specs_price}}</view>
                  </view>
              </view>
              <view class="serverCont-bottom">
                  <view>共3项</view>
                  <view>合计 <text>￥999.99</text> </view>
              </view>
              <view class="list">
                    <view>服务时长</view>
                    <view>{{item.serve_time}}小时</view>
              </view>
              <view class="list">
                    <view>上门时间</view>
                    <view>{{item.visit_time}}</view>
              </view>
              <view class="list">
                    <view>服务人员</view>
                    <view class="sub">
                        <view v-for="(item2,i2) in item.serve_person" :key="i2">{{item2}}</view>
                    </view>
              </view>
          </view>
      </view>

      <view class="jiesuanPart" v-if="tabIndex==1">
          <view class="list">
              <view>应付</view>
              <view>￥{{OrderDetail.pay_data&&OrderDetail.pay_data.jine}}</view>
          </view>
          <view class="list">
              <view>付款渠道</view>
              <view>{{OrderDetail.pay_data&&OrderDetail.pay_data.pay_type}}</view>
          </view>
          <view class="list">
              <view>交易流水号</view>
              <view>{{OrderDetail.pay_data&&OrderDetail.pay_data.liushui_bh}}</view>
          </view>
          <view class="list">
              <view>付款时间</view>
              <view>{{OrderDetail.pay_data&&OrderDetail.pay_data.pay_time}}</view>
          </view>

          <view class="remark">
              <view>备注</view>
              <view>{{OrderDetail&&OrderDetail.remark}}</view>
          </view>
      </view>

      <view class="pingjiaPart" v-if="tabIndex==2">
          <view v-for="(item,i) in OrderDetail.pingjia_list.serve_pingjia" :key="i">
            <view class="pingjiaTitle">
                <view>评价</view>
                <view>{{item.pingjia_time}}</view>
            </view>
            <view class="list">
                <view>服务评分</view>
                <view>{{item.serve_scour}}</view>
            </view>
            <view class="list">
                <view>评价内容</view>
                <view style="text-align:left">{{item.serve_eva}}</view>
            </view>
            <view v-if="OrderDetail.pingjia_list.person_pingjia">
                <view class="list"  v-for="(item2,i2) in OrderDetail.pingjia_list.person_pingjia[i]" :key="i2">
                    <view>{{item2.person_name}}</view>
                    <view>{{item2.person_scour}}</view>
                </view>
            </view>
         </view>
          <view class="after">
              <view class="titles">售后申请</view>
              <view class="list">
                <view>申请时间</view>
                <view>{{OrderDetail.after&&OrderDetail.after.create_time}}</view>
              </view>
              <view class="list">
                <view>申请内容</view>
                <view>{{OrderDetail.after&&OrderDetail.after.content}}</view>
              </view>
              <view class="list">
                <view>申请原因</view>
                <view>{{OrderDetail.after&&OrderDetail.after.apply_name}}</view>
              </view>
          </view>
          <view class="log">
              <view class="titles">退款记录</view>
              <view class="list">
                <view>暂无</view>
                <view>{{OrderDetail.reback_time}}</view>
              </view>
           
          </view>
      </view>


      <view class="bottomPart">
          <view>退款并关闭</view>
          <view v-if="OrderDetail.status==1||OrderDetail.status==2" @click.stop="modifyOrder">指派/修改</view>
      </view>
  </view>
</template>

<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
export default {
    components: {
		uniNavBar,
	},
    data(){
        return{
            tabIndex:0,
            OrderDetail:{},
        }
    },
    onLoad(options){
        this.$store.dispatch("mOrderDetail",{oid:options.oid}).then(res=>{
            if(res.code==1){
                this.OrderDetail = res.data
            }
        })
    },
    methods:{
        chooseTab(i){
            this.tabIndex = i
        },
        modifyOrder(){
            uni.navigateTo({
				url:`/pages/order/modifyorder?oid=${this.OrderDetail.oid}`
			})
        }
    }
}
</script>

<style lang="scss" scoped>
#orderDetail{
    padding-top: 44px;
    padding-bottom: 160rpx;
    .title{
        width: 100%;
        position: fixed;
        //#ifdef APP-PLUS
        top: 0px;
        //#endif
        //#ifdef H5
        top: 44px;
        //#endif
        background: #0077ff;
        line-height: 80rpx;
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: 28rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        text{
            //font-weight: bold;
            font-size: 36rpx;
        }
    }
    .orderPart{
        background: #fff;
        .list{
            line-height: 80rpx;
            padding: 0 20rpx;
            display: flex;
            justify-content: space-between;
            font-size: 32rpx;
            color:#262E34;
            view{
                &:nth-of-type(1){
                    color: #A4A8B7;
                }
            }
        }
    }
    .tab{
        display: flex;
        justify-content: space-between;
        padding: 40rpx;
        view{
            font-size: 28rpx;
            color: #a4a8b7;
            font-weight: 600;
            &.active{
                color: #2F87FF;
                position: relative;
                &:after{
                    content: '';
                    display: inline-block;
                    width: 40%;
                    height: 2px;
                    background: #2F87FF;
                    position: absolute;
                    bottom: -10rpx;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
            }
        }
    }

    .serverPart{
       
        
        .list{
            background: #fff;
            padding: 20rpx 20rpx;
            display: flex;
            justify-content: space-between;
            font-size: 32rpx;
            color:#262E34;
            view{
                &:nth-of-type(1){
                    color: #A4A8B7;
                    width: 30%;
                }
                &:nth-of-type(2){
                    color: #A4A8B7;
                    width: 100%;
                    text-align: right;
                }
                &.sub{
                    width: 100%;
                    view{
                        width: 100%;
                    }
                }
            }
        }
        .serverCont{
            padding: 20rpx;
            margin: 20px 0;
            background: #fff;
            box-sizing: border-box;
            .serverCont-box{
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;

                img{
                    height: 160rpx;
                    width: 160rpx;
                }
                .serverCont-right{
                    width: 100%;
                    view{
                        font-size: 32rpx;
                        color: #a4a8b7;
                        padding-left: 10rpx;
                        box-sizing: border-box;
                         width: 500rpx;
                        &:nth-of-type(1){
                            font-size: 32rpx;
                           
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            font-weight: bold;
                            line-height: 50rpx;
                            color: #262E34;
                        }

                    }
                }
            }
            .serverCont-bottom{
                display: flex;
                justify-content: flex-end;
                line-height: 50rpx;
                view{
                    font-size: 32rpx;
                    color: #a4a8b7;
                    text{
                        color: #262e34;;
                    }
                    &:nth-of-type(1){
                        margin-right: 40rpx;
                    }
                }
            }
        }
    }
    .jiesuanPart{
        .list{
            background: #fff;
            padding: 20rpx 20rpx;
            display: flex;
            justify-content: space-between;
            font-size: 32rpx;
            color:#262E34;
            view{
                &:nth-of-type(1){
                    color: #A4A8B7;
                    width: 30%;
                }
                &:nth-of-type(2){
                    color: #A4A8B7;
                    width: 100%;
                    text-align: right;
                }
                &.sub{
                    width: 100%;
                    view{
                        width: 100%;
                    }
                }
            }
        }
        .remark{
            margin-top: 40rpx;
           
            view{
                &:nth-of-type(1){
                    font-weight: bold;
                    font-size: 32rpx;
                     padding: 20rpx;
                }
                &:nth-of-type(2){
                    
                    font-size: 28rpx;
                    padding: 20rpx;
                    background: #fff;
                }
            }
        }
    }
    .pingjiaPart{
        .pingjiaTitle{
            padding: 20rpx;
            display: flex;
            justify-content: space-between;
            font-size: 32rpx;
            view{
                color: #a4a8b7;
                &:nth-of-type(1){
                    color: #262e34;
                    font-weight: bold;
                }
            }
        }
        .list{
            background: #fff;
            padding: 20rpx 20rpx;
            display: flex;
            justify-content: space-between;
            font-size: 32rpx;
            color:#262E34;
            view{
                &:nth-of-type(1){
                    color: #A4A8B7;
                    width: 30%;
                }
                &:nth-of-type(2){
                    color: #A4A8B7;
                    width: 100%;
                    text-align: right;
                }
                &.sub{
                    width: 100%;
                    view{
                        width: 100%;
                    }
                }
            }
        }
        .after,.log{
            font-size: 32rpx;
            
            .titles{
                font-weight: bold;
                color: #262e34;
                line-height: 60rpx;
                padding: 20rpx;

            }
            
        }
    }


    .bottomPart{
        position: fixed;
        bottom: 0;
        width: 100%;
        background: #fff;
        height: 160rpx;
        display: flex;
        justify-content: end;
        justify-content: flex-end;
        align-items: center;
        view{
            font-size: 28rpx;
            margin: 20rpx;
            &:nth-of-type(2){
                background: #0077ff;
                width: 180rpx;
                line-height: 60rpx;
                height: 60rpx;
                text-align: center;
                color: #fff;
                border-radius: 30rpx;
            }
            &:nth-of-type(1){
                color: #F04559;
                padding-top: 10rpx;
            }
        }
    }
}
</style>